<template>
	<el-table :data="students" size="small">
		<el-table-column type="index" label="序号" width="55"/>
		<el-table-column prop="name" label="姓名" width="100"/>
		<el-table-column prop="school" label="学校" min-width="180"/>
		<el-table-column prop="gradeTxt" label="当前年级" min-width="100"/>
		<el-table-column label="学员状态" min-width="180">
			<template slot-scope="scope">
				<span class="label label-green">{{scope.row.statusTxt}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" min-width="100">
			<template slot-scope="scope">
				<el-button type="text" size="small" @click.native.prevent="handleQuit(scope.$index, scope.row)">退班</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import { getClassStudents, quitClass } from '@/api/class'

export default {
	props: {
    classId: {
      type: Number,
      default: 0,
      required: true
    }
	},
	data() {
		return {
			students: [],
		}
	},
	mounted() {
		this.getClassStudents()
	},
	methods: {
		getClassStudents() {
      const para = {
        classId: this.classId
      }
      getClassStudents(para).then(res => {
        this.students = res.data
      })
		},
		handleQuit: function(index, row) {
      this.$confirm('确定将该学员从班级移除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const para = {
          merchantStudentId: row.merchantStudentId,
          classId: this.classId
        }
        quitClass(para).then(res => {
          this.$message({
            message: '退班成功！',
            type: 'success'
          })
          this.getClassStudents()
        }).catch(err => {
          this.$notify({
            title: '退课失败',
            message: err.msg,
            type: 'error'
          })
		    })
      })
    }
	}
}
</script>